<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="app">
<div>
 <button @click='push'>push</button>
 <button @click='pop'>pop</button>
 <button @click='shift'>shift</button>
 <button @click='unshift'>unshift</button>
 <button @click='splice'>splice</button>
 <button @click='sort'>sort</button>
 <button @click='reverse'>reverse</button>

 <button @click='concat'>concat</button>
 <button @click='slice'>slice</button>
 <button @click='map'>map</button>
 <button @click='filter'>filter</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item.message }}
 </li>
 </ul> 
</div>
</div>
<script>
	/**
	 * 变异方法
	 * Vue 包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法
	 * push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
	 * pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
	 * shift() 移除数组中的第一个项并返回该项，同时数组的长度减1
	 * unshift() 在数组前端添加任意个项并返回新数组长度
	 * splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员
	 * sort() 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组
	 * reverse() 用于反转数组的顺序，返回经过排序之后的数组
	 */
	var vm = new Vue({
		el : '#app',
		data : {
			items : [{message:'Foo'},{message:'Bar'},{message:'Ken'},{message:'Baz'},{message:'Susan'}],
			addValue : {message:'match'},
		},
		methods : {
			push : function(){
				this.items.push(this.addValue);
			},
			pop : function(){
				this.items.pop();
			},
			shift : function(){
				this.items.shift();
			},
			unshift : function(){
				this.items.unshift(this.addValue);
			},
			splice : function(){
				this.items.splice(0,1);
			},
			sort : function(){
				this.items.sort();
			},
			reverse : function(){
				this.items.reverse();
			},
			
			concat : function(){
	 			this.items = this.items.concat(this.addValue);
	 		},
	 		slice : function(){
	 			this.items = this.items.slice(1);
	 		},
	 		map(){
	 			this.items = this.items.map(function(item,index,arr){
	 				return index + item;
	 			})
	 		},
	 		filter(){
	 			this.items = this.items.filter(function(index,item,arr){
	 				return index>0;
	 			})
	 		}
		}
	});
</script>	
<script>
	/**
	 * 非变异方法
	 * 变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating
	 * method)方法，例如： filter(), concat(), slice()
	 * 这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
	 * concat() 先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组
	 * slice基于当前数组中一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回
	 * 数组
	 * map() 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组
	 * filter() 对数组中的每一项运行给定函数，该函数会返回true的项组成的数组
	 */
	 // var vm = new Vue({
	 // 	el : '#app',
	 // 	data : {
	 // 		items : ['Foo','Bar','Baz','Ken','Susan'],
	 // 		addValue : 'match',
	 // 	},
	 // 	methods : {
	 // 		concat : function(){
	 // 			this.items = this.items.concat(this.addValue);
	 // 		},
	 // 		slice : function(){
	 // 			this.items = this.items.slice(1);
	 // 		},
	 // 		map(){
	 // 			this.items = this.items.map(function(item,index,arr){
	 // 				return index + item;
	 // 			})
	 // 		},
	 // 		filter(){
	 // 			this.items = this.items.filter(function(index,item,arr){
	 // 				return index>0;
	 // 			})
	 // 		}
	 // 	}
	 // });
</script>
</body>
</html>